<template>
	<view class="container">
		<view class="title">{{ title }}</view>
		<view class="time">提交时间：{{ time }}</view>
		<view class="box_group">
			<view class="small_title">评价结果</view>
			<view class="level_list">
				<view :class="level == index ? 'on' : ''" @click="getLevel(index, item.evaluate)" v-for="(item, index) in level_list" :key="index">
					<image class="level_image" :src="item.img"></image>
					<text>{{ item.name }}</text>
					<image v-show="level == index ? true : false" class="select_level" src="../../static/evaluate/icon_gou.png" mode=""></image>
				</view>
			</view>
			<view class="checkbox_group">
				<u-checkbox-group :wrap="iswarp" shape="circle" icon-size="0" :size="25">
					<u-checkbox @change="checkboxChange(item.normName)" v-model="item.checked" v-for="(item, index) in list[level]" :key="index">
						{{ item.normDescribe }}
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		<view class="box_group">
			<view class="small_title">填写评价内容</view>
			<u-input class="content_pj" height="120" maxlength="1000" placeholder="填写评价内容" v-model="content" type="textarea" :border="border" />
		</view>
		<view class="box_group">
			<u-checkbox-group shape="circle" icon-size="0" :size="25"><u-checkbox @change="checkbox2Change" v-model="anony" wrap="true">匿名评价</u-checkbox></u-checkbox-group>
		</view>
		<view class="box_group"><view class="sureBtn" @click="submitEvaluate">提交评价</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			organName: '',
			time: '',
			iswarp: true,
			level: 0,

			content: '',
			submitContent: {},
			level_list: [
				{
					img: require('../../static/evaluate/level_5.png'),
					name: '非常满意',
					evaluate: 5
				},
				{
					img: require('../../static/evaluate/level_4.png'),
					name: '基本满意',
					evaluate: 4
				},
				{
					img: require('../../static/evaluate/level_3.png'),
					name: '不满意',
					evaluate: 3
				},
				{
					img: require('../../static/evaluate/level_2.png'),
					name: '非常满意',
					evaluate: 2
				},
				{
					img: require('../../static/evaluate/level_1.png'),
					name: '非常不满意',
					evaluate: 1
				}
			],
			value: '',
			list: [],
			content: '',
			border: true,
			detail: '',
			anony: false,
			isAnony: 0
		};
	},
	onLoad(data) {
		this.title = data.name;
		this.organName = data.organName;
		this.time = data.time;
		this.submitContent.sxCode = data.code;
		this.submitContent.userType = uni.getStorageSync('userType');
		this.submitContent.evaluateType = '2';
		this.submitContent.evaluate = 5;
		this.getEvaluateNormList();
	},
	methods: {
		getLevel(index, evaluate) {
			this.level = index;
			this.detail = '';
			this.submitContent.evaluate = evaluate;
			this.getEvaluateNormList();
		},
		checkboxChange(e) {
			this.detail += e + ',';
		},
		checkbox2Change(e) {
			if (e.value) {
				this.isAnony = 1;
			} else {
				this.isAnony = 0;
			}
		},
		getEvaluateNormList() {
			this.$ajax({
				url: '/api/wwwNews/getEvaluateNormList',
				method: 'get'
			}).then(res => {
				if (res.code == 200) {
					this.list = res.data;
				}
			});
		},
		// 提交评价
		submitEvaluate() {
			this.submitContent.content = this.content;
			this.submitContent.isAnony = this.isAnony;
			this.submitContent.detail = this.detail.slice(0, this.detail.length - 1);
			console.log(this.submitContent);
			this.$ajax({
				url: '/api/wwwNews/insertAppraise',
				method: 'post',
				contentType: 'application/json;charset=utf-8',
				needAuth: true,
				params: {
					accessToken: uni.getStorageSync('access_token'),
					userType: uni.getStorageSync('userType'),
				},
				data: JSON.stringify(this.submitContent)
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					setTimeout(()=>{
						uni.$emit('update',{type:'提交评价'})
						uni.navigateBack();
					},1000)
				} 
			});
		}
	}
};
</script>

<style scoped lang="less">
.container {
	padding: 30rpx 30rpx;
	& > view {
		padding-left: 20rpx;
	}
}
.title {
	font-size: 44rpx;
	color: #333;
	font-weight: bolder;
	margin-top: 30rpx;
}
.time {
	font-size: 28rpx;
	color: #999;
}
.box_group {
	margin-top: 30rpx;
	.small_title {
		font-size: 36rpx;
		color: #333;
		position: relative;
		padding-left: 20rpx;
		&::after {
			position: absolute;
			top: 50%;
			left: 0;
			width: 6rpx;
			content: '';
			height: 75%;
			transform: translateY(-50%);
			background-color: #5b96ff;
		}
	}
}
.level_list {
	margin-top: 30rpx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	view {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		flex-direction: column;
		flex: 1;
		height: 141rpx;
		font-size: 22rpx;
		&.on {
			background-color: #eaf6ff;
		}
		.level_image {
			width: 72rpx;
			height: 72rpx;
		}
		.select_level {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 24rpx;
			height: 16rpx;
		}
		text {
			margin-top: 10rpx;
		}
	}
}
.checkbox_group {
	margin-top: 30rpx;
}
.div_box {
	display: block;
	width: 100%;
	margin-bottom: 20rpx;
}
.content_pj {
	margin-top: 30rpx;
}
.sureBtn {
	height: 80rpx;
	font-size: 32rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background-color: #5b96ff;
	border-radius: 10rpx;
}
</style>
